<template>
	<view class="comments-pop">
		<z-paging ref="paging" v-model="commentList" @query="queryList" :fixed="true" :auto="false">
			<view class='pop-con'>
				<!-- <view class='new-com'>
					<view class='com-list'> -->
						<view class='l-first' v-if="dataObj.commentTime">
							<image class="header-img" mode='aspectFit'
								:src="dataObj.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
							</image>
							<view class='list-con'>
								<!-- <view class='list-name'>{{dataObj.userName}}</view> -->

								<view class='list-name' v-if="dataObj.wechatName==''||dataObj.wechatName==null">
									<view v-if="dataObj.phone==null||dataObj.phone==undefined">
										已注销用户
									</view>
									<view v-else>
										{{dataObj.phone.substr(0, 3) + '*****' + dataObj.phone.substr(8)}}
									</view>
								</view>
								<view class='list-name' v-else>{{dataObj.wechatName}}</view>


								<view class='list-content' @click="selectFirst">{{dataObj.content}}</view>
								<image v-if="dataObj.imageUrl" class='list-img' mode='widthFix'
									:src="dataObj.imageUrl||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
								</image>
								<view class='list-num'>{{dataObj.commentTime | timeFrom}}

								</view>
							</view>
							<view class='like-box' @click="thumbCommuntyTouched(dataObj)">
								<!-- <image class='like-img' mode='widthFix' src='https://dnsverify.pfmoto.com/appstatic/community/ac-1.png'></image> -->


								<image class='like-img' v-if="dataObj.isThumbs"
									src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
									mode="widthFix">
								</image>
								<image class='like-img' v-else
									src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
									mode="widthFix">
								</image>


								<view v-if="firstCommentFrom !== 'activity'" class='like-num'>{{dataObj.thumbsNum||0}}</view>
								<view v-else class='like-num'>{{dataObj.realThumbsNum||0}}</view>
							</view>
						</view>

						<view class="" v-if="commentList&&commentList.length>0">
							<view class='l-first sub' v-for="(k,index) in commentList" :key="index">
								<image class="header-img" mode='aspectFit'
									:src="k.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
								</image>
								<view class='list-con'>
									<!-- <view class='list-name'>{{k.userName}}</view> -->
									<view class='list-name' v-if="k.wechatName==''||k.wechatName==null">
										<view v-if="k.phone==null||k.phone==undefined">
											已注销用户
										</view>
										<view v-else>
											{{k.phone.substr(0, 3) + '*****' + k.phone.substr(8)}}
										</view>
									</view>
									<view class='list-name' v-else>{{k.wechatName}}</view>
									
									<view class='list-num' v-if="k.commentType==2">回复{{k.puserName}}:</view>
									<view class='list-content' @click="selectComment2(k)">{{k.content}}</view>
									<image v-if="k.imageUrl" :src="k.imageUrl" class='list-img' mode='widthFix'></image>
									<view class='list-num'>{{k.commentTime | timeFrom}} </view>
								</view>
								<view class='like-box' @click="thumbCommuntyTouched(k)">
									<!-- <image class='like-img' mode='widthFix' src='https://dnsverify.pfmoto.com/appstatic/community/ac-1.png'></image> -->
									<image class='like-img' v-if="k.isThumbs"
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
										mode="widthFix">
									</image>
									<image class='like-img' v-else
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
										mode="widthFix">
									</image>
									<view v-if="firstCommentFrom!=='activity' && k.commentType!==2" class='like-num'>{{k.thumbsNum||0}}</view>
									<view v-else class='like-num'>{{k.realThumbsNum||0}}</view>
									
								</view>
							</view>
						</view>

					<!-- </view>
				</view> -->
			</view>
		</z-paging>
		<InputPanel :commentType="commentType" fromType="activity" fromPage="list" :replyLevel="replyLevel" pageType="detail" :commentInfo="commentInfo" :placeholder="placeholder"
			@changeHolder="changeHolder" @createComment="createCommentResult" :total="total"
			:itemValue="communtyList[0]" />
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("@utils/dialog.js");
	import InputPanel from '@/components/inputPanel/inputPanel.vue'
	export default {
		components: {
			InputPanel,
		},
		data() {
			return {
				commentList: [],
				dataObj: {},
				pagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 10000,
					length: 1000,
					row: '',
					firstCommentFrom: ''
				},
				
				commentType: 0,
				replyLevel:'',//回复等级
				commentInfo: {},
				placeholder: "",
				total:0,
				communtyList:[],
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options.row, '------')
			if (options && options.row) {
				
				debugger
				this.firstCommentFrom = options.from
				this.row = options.row
				this.dataObj = JSON.parse(options.row)
				// this.loadList(this.dataObj.uuid);
				
				if(options.from=='activity'){
					this.loadDetail(this.dataObj.communityId)
				}else{
					this.loadDetail2(this.dataObj.communityId)
				}
				
				
				this.commentType = 1
				this.commentInfo = this.dataObj
				var name = this.dataObj.wechatName || this.dataObj.phone
				this.placeholder = "回复@" + name + ':'

			}
			console.log(getCurrentPages())
		},

		onShow() {
			if (uni.getStorageSync('row') != '' && uni.getStorageSync('row') != undefined) {
				
				this.row = uni.getStorageSync('row')
				uni.setStorageSync('row', "")
				this.dataObj = JSON.parse(this.row)
				this.firstCommentFrom = uni.getStorageSync('firstCommentFrom')
				uni.setStorageSync('firstCommentFrom', "")

				// this.loadHotCommenyList()
			}

		},
		mounted() {
			this.$nextTick(() => {
				// 触发下拉加载
				this.$refs.paging.reload();
			})
		},

		methods: {
			loadDetail: function(id) {
				var that = this;
			
				var uri = app.globalData.config.interfaces.URL_APP_GETPARTYINFO;
				var params = {
					"id": id,
					"loginId": app.getUserId()
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.communtyList = []
						that.communtyList.push(res.data)
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			loadDetail2: function(id) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMUNTIY_DETAIL;
				var params = {
					"id": id,
					"loginId": app.getUserId()
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.communtyList = [res.data]
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			selectFirst(){
				this.commentInfo = this.dataObj
				this.commentType = 1
				
				this.replyLevel=''
				this.placeholder =''
				var name = this.dataObj.wechatName || this.dataObj.phone
				this.$nextTick(() => {
					this.placeholder = "回复@" + name + ':'
				})
			},
			//选择 二级，三级，以下
			selectComment2(item){//点击二级(暂时 仅活动)
				// if(this.firstCommentFrom=='activity'){
					//this.commentType = type
					this.commentInfo = item
					if(item.commentType==1){//回复 二级评论
						this.replyLevel='2'
					}else if(item.commentType==2){//回复三级评论
						this.replyLevel='3'
					}
					
					var name = item.wechatName || item.phone
					this.placeholder =''
					this.$nextTick(() => {
						this.placeholder = "回复@" + name + ':'
					})
				// }
			},
			changeHolder(val) {
				debugger
				// this.placeholder = val
				console.log('在这在这在这在这在这在这在这在这在这在这在这在这在这在这在这在这在这在这在这在这在这！！！！' + JSON.stringify(this.dataObj))
				this.commentInfo = this.dataObj
				this.commentType = 1
				
				this.replyLevel=''
				this.placeholder =''
				var name = this.dataObj.wechatName || this.dataObj.phone
				this.$nextTick(() => {
					this.placeholder = "回复@" + name + ':'
				})
				// this.commentInfo.uuid = ''
			},
			createCommentResult(val) {
				// if(this.firstCommentFrom=='activity'){
					this.$refs.paging.reload();
				// }else{
				// 	let info = {
				// 		content: val.content,
				// 		imageUrl: val.imageUrl,
				// 		createTime: dateForCalendar.yearTime('yearTime', new Date()),
				// 		wechatName: app.globalData.userInfo.wechatName ? app.globalData.userInfo.wechatName : app
				// 			.globalData.userInfo.phone.substr(0, 3) + '*****' + app.globalData.userInfo.phone.substr(8),
				// 		userimages: app.globalData.userInfo.userimages,
				// 		uuid: val.id,
				// 		isThumbs:0,
				// 		thumbsNum:0
				// 	}
				// 	this.commentList.map(item => {
				// 		console.log(item.firstComment.uuid,val.pid)
				// 		if (item.firstComment.uuid == val.pid) {
				// 			item.secondComments.splice(0, 1, info)
				// 			item.firstComment.secondCount = item.firstComment.secondCount + 1
				// 		}
				// 	})
				
				// 	if (this.hotList.firstComment.uuid == val.pid) {
				// 		this.hotList.secondComments.splice(0, 1, info)
				// 		this.hotList.firstComment.secondCount = this.hotList.firstComment.secondCount + 1
				// 	}
				
				// 	if (this.uuid == val.pid) {
				// 		var obj = {
				// 			firstComment: info,
				// 			secondComments: []
				// 		}
				// 		if (this.commentList.length > 0) {
				// 			this.commentList.splice(0, 0, obj)
				// 		} else {
				// 			this.commentList.push(obj)
				// 		}
				// 	}
				// }
			},
			queryList(pageNo, pageSize) {
				this.loadList(pageNo, pageSize)
			},
			async loadList(pageNo, pageSize) {
				console.log(pageNo, pageSize, '------------------')
				var that = this;
				if(this.firstCommentFrom=='activity'){
					var uri = app.globalData.config.interfaces.URL_APP_GETPARTYSECONDCOMMENTPAGE;
					var params = {
						"pid": this.dataObj.uuid,
						"authorId": app.getUserId(),
						"pageNum": pageNo,
						"pageSize": pageSize,
					};
				}else{
					var uri = app.globalData.config.interfaces.URL_COMMENT_SECOND;
					var params = {
						"pid": this.dataObj.uuid,
						"loginId": app.getUserId(),
						"pageNum": pageNo,
						"pageSize": pageSize,
					};
				}
				var list=[]
				await network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						// if(this.firstCommentFrom=='activity'){
						// 	list=res.data.list
						// }else{
						// 	that.$refs.paging.complete(res.data.list);
						// }
						list=res.data.list
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
				
				var allList=[]
				debugger
				for(var i=0;i<list.length;i++){
					var secondList=[list[i]]
					if(that.firstCommentFrom=='activity'){//活动
						var uri = app.globalData.config.interfaces.URL_APP_GETPARTYTHIRDCOMMENTPAGE;
					}else{
						var uri = app.globalData.config.interfaces.URL_APP_GETTHIRDCOMMUNITYCOMMENTBACK;
					}
					
					var params = {
						"pid": list[i].uuid,
						"authorId": app.getUserId(),
						"pageNum": 1,
						"pageSize": 100000,
					};
					await network.get(uri, params, 'form').then(res1 => {
						if (res1.code == 200) {
							var thirdList=res1.data.list
							var secondAndThirdList=[...secondList,...thirdList]
							allList=[...allList,...secondAndThirdList]
							console.log(allList)//二级和三级的混合
							that.$refs.paging.complete(allList);
						}
					})
				}
			},
			//点赞社区动态
			thumbCommuntyTouched: function(item) {
				
				if (util.isLogin(getApp())) {
					this.detail = item
					var thumbsFlag
					this.detail.isThumbs == 0 ? thumbsFlag = 1 : thumbsFlag = 0
					if(this.firstCommentFrom=='activity'){
						var uri = app.globalData.config.interfaces.URL_APP_THUMBSPARTY;
						var sumbId
						var isfrom
						if(item.commentType==2){//三级
							sumbId=item.id
							isfrom=2
						}else{
							sumbId=item.uuid
							isfrom=1
						}
						var params = {
							"id": sumbId,
							"loginId": app.getUserId(),
							"isfrom": isfrom,
							"thumbsFlag": thumbsFlag
						};
					}else{
						var uri = app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
						if(item.commentType==2){//三级
							sumbId=item.id
						}else{
							sumbId=item.uuid
						}
						var params = {
							"id": sumbId,
							"loginId": app.getUserId(),
							"isfrom": 1,
							"thumbsFlag": thumbsFlag
						};
					}
					
					network.post(uri, params, 'form').then(res => {
						if (res.code == 200) {
							debugger
							if(this.firstCommentFrom=='activity' || item.commentType==2){
								item.realThumbsNum = item.realThumbsNum + (!item.isThumbs ? 1 : -1);
							}else{
								item.thumbsNum = item.thumbsNum + (!item.isThumbs ? 1 : -1);
							}
							
							item.isThumbs = !item.isThumbs;

						} else {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch(res => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
						console.error(res);
					});
				} else {
					// util.jumpLogin();

					uni.setStorageSync('row', this.row)
					uni.setStorageSync("firstCommentFrom", this.firstCommentFrom)
					util.jumpLogin("secondCommentList")
				}
			},
			// loadData: function(isRefresh) {
			// 	var that = this; //刷新页面配置

			// 	if (isRefresh) {
			// 		that.pagination.page = 1;
			// 		that.pagination.totalPage = 1;
			// 	} else {
			// 		that.pagination.page += 1;
			// 	}
			// 	this.pagination = that.pagination
			// 	this.loadHotCommenyList()

			// },
			// loadHotCommenyList() {

			// 	var that = this;
			// 	var uri = app.globalData.config.interfaces.URL_COMMENT_HOT;
			// 	var params = {
			// 		"pageNum": that.pagination.page,
			// 		"pageSize": that.pagination.limit,
			// 		"id": this.dataObj.pid,
			// 		"loginId": app.getUserId() || ""
			// 	};
			// 	network.get(uri, params, 'form').then(res => {
			// 		uni.stopPullDownRefresh();

			// 		if (res.code == 200) {
			// 			this.loadList(this.dataObj.uuid);

			// 		} else {
			// 			uni.showToast({
			// 				title: res.message,
			// 				duration: 3000,
			// 				icon: 'none'
			// 			})
			// 		}
			// 	}).catch(res => {
			// 		uni.stopPullDownRefresh();
			// 		uni.showToast({
			// 			title: res.errMsg,
			// 			duration: 3000,
			// 			icon: 'none'
			// 		})
			// 		console.error(res);
			// 	});
			// },
		}
	}
</script>

<style lang="scss" scoped]>
	.all-footer {
		font-size: 28rpx;
		line-height: 76rpx;
		color: #ADB0AE;
		text-align: center;
	}

	.comments-pop {
		width: 100vw;
		color: #3D3A3A;
		font-size: 28rpx;


		.pop-con {
			width: 100%;
			// position: relative;
			box-sizing: border-box;
			padding: 40rpx 32rpx 208rpx;
			background: #FFFFFF;
			border-radius: 4px 4px 0px 0px;
			// height: 93vh;
			// overflow: scroll;


			.con-title {
				width: 100%;
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
				font-size: 32rpx;
				height: 112rpx;
				line-height: 112rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #fff;
				opacity: 1;
				z-index: 99;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			// .hot-com,
			// .new-com {

				.com-title {
					margin: 32rpx 0 16rpx;
				}

				// .com-list {

					.l-first {
						display: flex;
						justify-content: space-between;
						padding-top: 32rpx;

						.header-img {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
						}

						.list-con {
							flex: 1;
							padding-left: 32rpx;
							line-height: 40rpx;

							.list-name {
								color: #000;
							}

							.list-content {
								margin-top: 16rpx;
							}

							.list-img {
								width: 200rpx;
								width: 200rpx;
							}

							.list-num {
								font-size: 24rpx;
								line-height: 34rpx;
								color: #ADB0AE;
								margin-top: 20rpx;
							}
						}

						.like-box {
							.like-img {
								width: 34rpx;
								height: 34rpx;
								vertical-align: middle;
							}

							.like-num {
								display: inline-block;
								font-size: 24rpx;
								color: #ADB0AE;
								margin-left: 4rpx;
								position: relative;
								top: 3px;
							}
						}

					}

					.sub {
						padding-left: 96rpx;
					}
				// }
			// }

			.all-footer {
				font-size: 28rpx;
				line-height: 76rpx;
				color: #ADB0AE;
				text-align: center;
				margin-top: 40rpx;
			}

			.input-box {
				width: 100%;
				height: 108rpx;
				display: flex;
				align-items: center;
				position: fixed;
				bottom: 100rpx;
				left: 0;
				background-color: #fff;
				z-index: 99;

				input {
					flex: 1;
					background: #EDEDED;
					border-radius: 4rpx;
					height: 68rpx;
					line-height: 68rpx;
					margin-left: 32rpx;
					padding-left: 32rpx;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin: 0 32rpx;
				}

				.send {
					font-size: 32rpx;
					line-height: 44rpx;
					color: #ADB0AE;
					margin-right: 32rpx;
				}
			}
		}
	}
</style>
